<template>
    <div class="home-container">
        <!-- 头部标题 (Moved to top) -->
        <div class="header">
            <h1 class="main-title">AI家庭医生</h1>
            <p class="subtitle">智能医疗 · 健康管理</p>
        </div>
        
        <!-- 背景装饰 -->
        <div class="medical-bg"></div>
        
        <!-- 主要内容区 -->
        <div class="home-content">
            <!-- 内容区域 -->
            <main class="content-container">
                <!-- 每日推送 -->
                <section class="daily-recommend" :class="{ alert: isAlert }">
                    <div class="section-header">
                        <h2>{{ alertTitle }}</h2>
                        <span class="date">{{ currentDate }}</span>
                    </div>
                    <div class="recommend-content">
                        <div class="health-tip">
                            <span class="tip-icon">💡</span>
                            <p>{{ alertContent }}</p>
                        </div>
                    </div>
                </section>

                <!-- 功能入口 -->
                <section class="function-grid">
                    <div v-for="(item, index) in functions" 
                         :key="index" 
                         class="function-item"
                         @click="handleFunctionClick(item)">
                        <div class="icon-wrapper">
                            <div class="icon">{{ item.icon }}</div>
                        </div>
                        <div class="function-info">
                            <span class="label">{{ item.label }}</span>
                            <span class="description">{{ item.description }}</span>
                        </div>
                    </div>
                </section>

                <!-- 添加今日数据按钮 (Modified) -->
                <div 
                    :class="['data-entry-button', buttonState]" 
                    @click="openDataInputModal"
                >
                    <div class="plus-icon">+</div>
                    <div class="button-text">
                        {{ buttonText }} <!-- Bind to reactive text -->
                    </div>
                </div>
            </main>

            <!-- 底部导航 (Now a component) -->
            <navigation :active-tab="activeTab" @tab-change="handleTabChange" />

            <!-- 悬浮医生按钮 -->
            <div class="floating-doctor" 
                 @mousedown="startDrag"
                 @touchstart="startDrag"
                 @mousemove="onDrag"
                 @touchmove="onDrag"
                 @mouseup="stopDrag"
                 @touchend="stopDrag"
                 :style="{
                     left: position.x + 'px',
                     top: position.y + 'px',
                     right: 'auto',
                     bottom: 'auto'
                 }">
                <div class="doctor-icon">👨‍⚕️</div>
                <div class="doctor-text">在线医生</div>
            </div>

            <!-- 指标输入弹窗 -->
            <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
                <div class="modal-content">
                    <h2>输入今日指标</h2>
                    <div class="form-group">
                        <label for="temperature">体温 (°C)</label>
                        <input type="number" id="temperature" v-model="healthData.temperature" placeholder="例如 36.5">
                    </div>
                    <div class="form-group">
                        <label for="bloodOxygen">血氧 (%)</label>
                        <input type="number" id="bloodOxygen" v-model="healthData.bloodOxygen" placeholder="例如 98">
                    </div>
                    <!-- 在这里添加更多指标输入 -->
                    <div class="form-group">
                        <label for="heartRate">心率 (bpm)</label>
                        <input type="number" id="heartRate" v-model="healthData.heartRate" placeholder="例如 75">
                    </div>
                     <div class="form-group">
                        <label for="bloodPressureSystolic">血压 (收缩压 mmHg)</label>
                        <input type="number" id="bloodPressureSystolic" v-model="healthData.bloodPressureSystolic" placeholder="例如 120">
                    </div>
                     <div class="form-group">
                        <label for="bloodPressureDiastolic">血压 (舒张压 mmHg)</label>
                        <input type="number" id="bloodPressureDiastolic" v-model="healthData.bloodPressureDiastolic" placeholder="例如 80">
                    </div>
                    <div class="modal-actions">
                        <button @click="closeModal" class="cancel-btn">取消</button>
                        <button @click="saveHealthData" class="save-btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
import { useRouter } from "vue-router";
import Navigation from '@/components/Navigation.vue'; // Import the component
import axios from 'axios';
import { getItem } from '@/components/Session.vue';

export default {
    components: { // Register the component
        Navigation
    },
    setup() {
        const router = useRouter();
        const activeTab = ref('home');
        const ws = ref(null);
        const alertTitle = ref('今日健康提醒');
        const alertContent = ref('今日建议：保持规律作息，适量运动，注意饮食均衡');
        const isAlert = ref(false);
        const isFlashingAlert = ref(false);
        let flashTimeoutId = null;
        const showModal = ref(false); // 控制弹窗显示
        const healthData = ref({ // 健康指标数据模型
            temperature: '',
            bloodOxygen: '',
            heartRate: '',
            bloodPressureSystolic: '',
            bloodPressureDiastolic: ''
            // 添加更多指标的默认值
        });
        
        // 新增：按钮状态和文本
        const buttonState = ref('red'); // 默认状态 (对应 state: 3)
        const buttonText = ref('您还没有测量数据'); // 默认文本
        const user = getItem("user")
        // axios.get('/api/tips/get')
        //      .then(res=>{
        //         alertContent.value=res.data.data.content
        //         console.log(alertContent.value)
        //      })

        const currentDate = computed(() => {
            const date = new Date();
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        });

        const functions = ref([
            { 
                label: 'AI智能问诊', 
                icon: '⚕️',
                description: '智能诊断，专业建议',
                route: '/aiview'
            },
            { 
                label: '身体指标', 
                icon: '📊',
                description: '健康数据可视化',
                route: '/indicator'
            },
            { 
                label: '健康建议', 
                icon: '📋',
                description: '结合各项指标的饮食、运动、作息建议',
                route: '/healthadvice'
            },
            { 
                label: '家属绑定', 
                icon: '👪',
                description: '家人健康关怀',
                route: '/family'
            }
        ]);

        const handleFunctionClick = (item) => {
            if (item.route) {
                router.push(item.route);
            }
        };

        // Handle tab change event from Navigation component
        const handleTabChange = (newTab) => {
            activeTab.value = newTab;
            if (newTab === 'mine') {
                // Optional: Navigate to 'mine' route if needed
                router.push('/personal'); // Example route
            } else if (newTab === 'home') {
                // Ensure we are on home or navigate back if needed
                 if (router.currentRoute.value.path !== '/') {
                     router.push('/');
                 }
            }
        };

        // 从localStorage获取初始状态
        const loadAlertState = () => {
            const savedState = localStorage.getItem('alertState');
            if (savedState) {
                const state = JSON.parse(savedState);
                alertTitle.value = state.title;
                alertContent.value = state.content;
                isAlert.value = state.isAlert;
            }
        };

        // 保存状态到localStorage
        const saveAlertState = (title, content, isAlertStatus) => {
            const state = {
                title,
                content,
                isAlert: isAlertStatus
            };
            localStorage.setItem('alertState', JSON.stringify(state));
        };

        // 清除可能正在进行的闪烁
        const clearFlashing = () => {
            if (flashTimeoutId) {
                clearTimeout(flashTimeoutId);
                flashTimeoutId = null;
            }
             isFlashingAlert.value = false; // 确保闪烁状态关闭
        };

        // 处理警报消息
        const handleAlertMessage = (message) => {
            console.log('Received alert message:', message);
            clearFlashing(); // 收到新消息时，先停止之前的闪烁
            
            if (message.includes('指标异常')) {
                isAlert.value = true;
                alertTitle.value = '⚠️ 健康警报';
                alertContent.value = message;
                saveAlertState(alertTitle.value, alertContent.value, true);
                showNotification(message); // 显示浏览器通知

                // --- 开始闪烁逻辑 (控制 isFlashingAlert 的状态) ---
                let flashCount = 0;
                const totalFlashes = 3; // 总共闪烁次数
                const flashDuration = 400; // 每次闪烁亮/灭的持续时间 (毫秒)

                const flashStep = () => {
                    if (flashCount >= totalFlashes * 2) { // 闪烁完成 (每次闪烁包含亮和灭两次切换)
                        isFlashingAlert.value = false; // 闪烁结束，保持红色状态 (通过 isAlert=true 控制)
                        console.log('Flashing finished.');
                        return;
                    }

                    // 切换闪烁状态 (亮/灭)
                    isFlashingAlert.value = !isFlashingAlert.value;
                    flashCount++;
                    console.log(`Flash step ${flashCount}, flashing: ${isFlashingAlert.value}`);

                    flashTimeoutId = setTimeout(flashStep, flashDuration);
                };
                
                flashStep(); // 启动第一次闪烁
                // ---------------------------------------------------

            } else if (message.includes('指标正常')) {
                isAlert.value = false;
                isFlashingAlert.value = false;
                alertTitle.value = '今日健康提醒';
                axios.get('/api/tips/get')
                    .then(res => {
                        alertContent.value = res.data.data.content;
                        saveAlertState(alertTitle.value, alertContent.value, false);
                    }).catch(err => {
                        console.error("获取常规提示失败:", err);
                        alertContent.value = '保持健康生活习惯。'; // 默认提示
                        saveAlertState(alertTitle.value, alertContent.value, false);
                    });
            } else {
                 // 处理其他类型的消息或忽略
                 console.log('Received non-alert message or unknown format:', message);
                 // 可以选择更新 alertContent 为这个消息，或者保持不变
                 // alertContent.value = message;
                 // saveAlertState(alertTitle.value, alertContent.value, isAlert.value);
            }
        };

        // 初始化WebSocket连接
        const initWebSocket = () => {
            // 如果连接已存在且是打开状态，直接返回
            if (ws.value && ws.value.readyState === WebSocket.OPEN) {
                return;
            }
            
            const username = user.username; // 这里应该从用户信息中获取
            // ws.value = new WebSocket(`ws://47.120.7.137:8080/alert/${username}`);
             ws.value = new WebSocket(`ws://47.111.115.11:8080/alert/${username}`);
            
            ws.value.onopen = () => {
                console.log('WebSocket连接已建立');
                // 连接建立时加载保存的状态
                loadAlertState();
            };

            ws.value.onmessage = (event) => {
                const message = event.data;
                handleAlertMessage(message);
            };

            ws.value.onerror = (error) => {
                console.error('WebSocket错误:', error);
            };

            ws.value.onclose = () => {
                console.log('WebSocket连接已关闭');
                // 只有在组件未卸载时才尝试重新连接
                if (ws.value) {
                    setTimeout(initWebSocket, 5000);
                }
            };
        };
        //      try {
        //    await axios.post('/api/healthdata/record', healthData.value);
        //     const today = new Date().toISOString().split('T')[0];
        //          localStorage.setItem('lastHealthDataEntryDate', today); // 记录日期
        //          isDataEnteredToday.value = true; // 更新状态
        //          closeModal(); // 关闭弹窗
        //         alert('数据保存成功!');
        //      } catch (error) {
        //       console.error('Error saving health data:', error);
        //        alert('数据保存失败，请重试。');
        //      }

        // 获取按钮状态的函数
        const fetchButtonState = async () => {
            console.log('Fetching button state...');
            try {
                // !!! 重要: '123' 应替换为实际用户名获取逻辑 !!!
                const response = await axios.get('/api/user/getstate', {
                    params: { username: user.username } 
                });

                if (response.data && response.data.code === 200) {
                    const state = response.data.data;
                    console.log('Received state:', state);
                    if (state === 1) {
                        buttonState.value = 'green';
                        buttonText.value = '您已经测量全部数据了，点击按钮可更新';
                    } else if (state === 2) {
                        buttonState.value = 'yellow';
                        buttonText.value = '补齐数据可以更好的关注身体健康';
                    } else { // state === 3 or other unexpected values
                        buttonState.value = 'red';
                        buttonText.value = '您今天还没有测量数据';
                    }
                } else {
                    console.error('Error: Invalid response format from /api/user/getstate', response.data);
                    buttonState.value = 'red'; // Default to red on error
                    buttonText.value = '获取状态失败，请稍后重试';
                }
            } catch (error) {
                console.error('Error fetching button state:', error);
                 buttonState.value = 'red'; // Default to red on error
                 buttonText.value = '网络错误，无法获取状态';
            }
        };
        
        // 打开指标输入弹窗
        const openDataInputModal = () => {
            showModal.value = true;
        };

        // 关闭弹窗
        const closeModal = () => {
            showModal.value = false;
            // 可以选择重置表单
            // healthData.value = { temperature: '', bloodOxygen: '', heartRate: '', bloodPressureSystolic: '', bloodPressureDiastolic: '' };
        };

        // 保存健康数据
        const saveHealthData = async () => {
            console.log('Saving health data:', healthData.value);
            try {
                // 构建请求数据
                const requestData = {
                    temperature: healthData.value.temperature || "",
                    bloodOxygen: healthData.value.bloodOxygen || "",
                    heartRate: healthData.value.heartRate || "",
                    systolicPressure: healthData.value.bloodPressureSystolic || "",
                    diastolicPressure: healthData.value.bloodPressureDiastolic || "",
                    username: user.username // 这里应该从用户信息中获取
                };

                // 发送POST请求
                const response = await axios.post('/api/indicator/detail/add', requestData);

                if (response.data.code === 200) {
                    console.log('数据保存成功');
                    closeModal(); // 关闭弹窗
                    // 保存成功后，立即重新获取按钮状态以更新显示
                    await fetchButtonState();
                } else {
                    console.error('数据保存失败:', response.data.message);
                    alert(response.data.message || '数据保存失败，请重试');
                }
            } catch (error) {
                console.error('Error saving health data:', error);
                alert('网络错误，请稍后重试');
            }
        };

        // 显示浏览器通知
        const showNotification = (message) => {
            // 检查浏览器是否支持通知
            if (!("Notification" in window)) {
                console.log("此浏览器不支持桌面通知");
                return;
            }

            // 检查是否已授予权限
            if (Notification.permission === "granted") {
                createNotification(message);
            } else if (Notification.permission !== "denied") {
                // 请求权限
                Notification.requestPermission().then(permission => {
                    if (permission === "granted") {
                        createNotification(message);
                    }
                });
            }
        };

        // 创建通知
        const createNotification = (message) => {
            const title = message.includes('指标异常') ? '⚠️ 健康警报' : '健康提醒';
            const options = {
                body: message,
                icon: '/favicon.ico', // 可以替换为您的应用图标
                badge: '/favicon.ico',
                vibrate: [200, 100, 200], // 振动模式
                tag: 'health-alert' // 使用相同的tag来替换旧通知
            };

            new Notification(title, options);
        };

        // 组件挂载时建立WebSocket连接
        onMounted(() => {
            initWebSocket();
            fetchButtonState(); // 获取初始按钮状态
            // 修改 storage 监听器逻辑
            window.addEventListener('storage', (e) => {
                if (e.key === 'alertState') {
                    console.log('Detected alertState change in another tab/window.');
                    loadAlertState();
                    // 如果状态变为非警报，确保清除闪烁
                    if (!isAlert.value) {
                        clearFlashing();
                    }
                }
            });
        });

        // 组件卸载时清理
        onUnmounted(() => {
            window.removeEventListener('storage', loadAlertState);
            clearFlashing(); // 组件卸载时确保清除闪烁定时器
            if (ws.value) {
                ws.value.close();
                ws.value = null; // 清理 ws 引用
            }
        });

        // 组件被激活时（从其他页面返回时）不重新连接
        onActivated(() => {
            // 不执行任何操作，保持原有连接
        });

        // 组件被停用时（离开页面时）保持连接
        onDeactivated(() => {
            // 不执行任何操作，保持原有连接
        });

        // 新增：悬浮医生按钮点击处理
        const handleDoctorClick = () => {
            // 实现医生点击逻辑
            console.log('医生按钮被点击');
        };

        // 新增：拖动相关状态
        const position = ref({ x: window.innerWidth - 100, y: window.innerHeight - 200 });
        const isDragging = ref(false);
        const dragStart = ref({ x: 0, y: 0 });
        
        // 开始拖动
        const startDrag = (e) => {
            isDragging.value = true;
            const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
            const clientY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
            dragStart.value = {
                x: clientX - position.value.x,
                y: clientY - position.value.y
            };
        };
        
        // 拖动中
        const onDrag = (e) => {
            if (!isDragging.value) return;
            e.preventDefault();
            
            const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
            const clientY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
            
            // 计算新位置
            let newX = clientX - dragStart.value.x;
            let newY = clientY - dragStart.value.y;
            
            // 限制在视窗范围内
            const maxX = window.innerWidth - 100;
            const maxY = window.innerHeight - 100;
            newX = Math.max(0, Math.min(newX, maxX));
            newY = Math.max(0, Math.min(newY, maxY));
            
            position.value = { x: newX, y: newY };
        };
        
        // 停止拖动
        const stopDrag = () => {
            isDragging.value = false;
        };
        
        // 监听窗口大小变化
        onMounted(() => {
            window.addEventListener('resize', () => {
                const maxX = window.innerWidth - 100;
                const maxY = window.innerHeight - 100;
                position.value = {
                    x: Math.min(position.value.x, maxX),
                    y: Math.min(position.value.y, maxY)
                };
            });
        });

        return {
            activeTab,
            functions,
            handleFunctionClick,
            currentDate,
            handleTabChange,
            alertTitle,
            alertContent,
            isAlert,
            showModal, // 暴露给模板
            healthData, // 暴露给模板
            buttonState, // 暴露按钮状态
            buttonText, // 暴露按钮文本
            openDataInputModal, // 暴露给模板
            closeModal, // 暴露给模板
            saveHealthData, // 暴露给模板
            isFlashingAlert, // 暴露闪烁状态
            handleDoctorClick, // 暴露医生点击处理
            position,
            startDrag,
            onDrag,
            stopDrag
        };
    }
}
</script>

<style scoped>
.home-container {
    min-height: 100vh;
    max-width: 100vw;
    width: 100%;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

.header {
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: white;
    padding: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-title {
    font-size: 5vw;
    margin: 0;
    font-weight: 600;
    color: white;
}

.subtitle {
    font-size: 3.5vw;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 1.5vw;
}

.home-content {
    flex: 1;
    padding: 4vw;
    padding-bottom: 20vw;
    display: flex;
    flex-direction: column;
}

.content-container {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    flex: 1;
    justify-content: space-between;
}

.daily-recommend {
    background: white;
    border-radius: 4vw;
    padding: 5vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.daily-recommend.alert {
    background-color: #fff1f0; 
    border: 2px solid #ff4d4f;
    color: #cf1322;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
    }
}

.daily-recommend.alert h2 {
    color: #cf1322;
    font-size: 5vw;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 2vw;
}

.daily-recommend.alert h2::before {
    content: '';
    font-size: 6vw;
}

.daily-recommend.alert .health-tip p {
    color: #cf1322;
    font-size: 4.2vw;
    font-weight: 500;
    line-height: 1.4;
}

.daily-recommend.alert .health-tip {
    background-color: rgba(255, 77, 79, 0.1);
    border-radius: 3vw;
    padding: 4vw;
}

.daily-recommend.alert .tip-icon {
    color: #cf1322;
    font-size: 6vw;
}

.daily-recommend.flashing {
    animation: flash-red 0.8s linear;
     /* 注意：这里只应用一次动画。闪烁次数由 JS 控制状态切换实现 */
     /* 如果 JS 快速切换 flashing 类，每次添加类都会触发动画 */
}

@keyframes flash-red {
    0%, 100% { background-color: #ff7875; border-color: #ff4d4f; } /* 闪烁时的颜色 */
    50% { background-color: #fff1f0; border-color: #ffa39e; }      /* 恢复到警报底色 */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.5vw;
}

.section-header h2 {
    font-size: 4.5vw;
    margin: 0;
    color: #333;
    transition: color 0.3s ease;
}

.section-header h2.alert {
    color: #cf1322;
}

.date {
    font-size: 3.5vw;
    color: #666;
}

.recommend-content {
    background: #f8f9fa;
    border-radius: 2.5vw;
    padding: 4vw;
}

.health-tip {
    display: flex;
    align-items: center;
    gap: 3.5vw;
}

.tip-icon {
    font-size: 5.5vw;
}

.health-tip p {
    font-size: 3.8vw;
    color: #666;
    margin: 0;
    transition: color 0.3s ease;
}

.health-tip p.alert {
    color: #cf1322;
}

.function-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
}

.function-item {
    background: white;
    border-radius: 4vw;
    padding: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s;
    aspect-ratio: 1 / 1;
    text-align: center;
}

.function-item:hover {
    transform: translateY(-0.5vw);
}

.icon-wrapper {
    width: 13vw;
    height: 13vw;
    border-radius: 3.5vw;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 2.5vw 0;
    flex-shrink: 0;
}

.icon {
    font-size: 7vw;
}

.function-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.label {
    display: block;
    font-size: 4vw;
    font-weight: 600;
    color: #333;
    margin-bottom: 1vw;
}

.description {
    font-size: 3vw;
    color: #666;
    line-height: 1.3;
}

/* 响应式调整 */
@media screen and (max-width: 320px) {
    .function-item {
        padding: 3vw;
        border-radius: 3vw;
    }

    .icon-wrapper {
        width: 11vw;
        height: 11vw;
        margin-bottom: 2vw;
        border-radius: 3vw;
    }

    .icon {
        font-size: 6vw;
    }

    .label {
        font-size: 3.5vw;
    }

    .description {
        font-size: 2.8vw;
    }

    .data-entry-button {
        padding: 4vw 5vw;
    }
    .plus-icon {
        font-size: 6vw;
    }
    .button-text {
        font-size: 3.5vw;
    }
}

/* 添加今日数据按钮样式 (默认为绿色状态) */
.data-entry-button {
    /* Represents the 'green' state */
    background: linear-gradient(135deg, #66bb6a, #42a5f5); /* Green/Blue gradient */
    color: white;
    border-radius: 50px;
    padding: 5vw 6vw;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1vw 2.5vw rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    margin: 0 2vw;
}

/* 红色状态 (未录入) */
.data-entry-button.red {
    background: linear-gradient(135deg, #ef5350, #f44336); /* Red gradient */
}

/* 黄色状态 (部分录入) */
.data-entry-button.yellow {
    background: linear-gradient(135deg, #ffee58, #fdd835); /* Yellow gradient */
    color: #424242; /* Darker text for yellow background */
}

.data-entry-button:hover {
    transform: translateY(-0.5vw);
    /* Consider adjusting hover shadow based on state */
    box-shadow: 0 1.5vw 3.5vw rgba(0, 0, 0, 0.2); 
}

.plus-icon {
    font-size: 7vw;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 1.5vw;
}

.button-text {
    font-size: 4vw;
    font-weight: 500;
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 6vw;
    border-radius: 4vw;
    box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.2);
    width: 85%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 5vw;
    font-size: 5vw;
    color: #333;
}

.form-group {
    margin-bottom: 4vw;
}

.form-group label {
    display: block;
    margin-bottom: 1.5vw;
    font-size: 3.8vw;
    color: #555;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 3vw 3.5vw;
    border: 1px solid #ccc;
    border-radius: 2.5vw;
    font-size: 3.8vw;
    box-sizing: border-box;
}

.form-group input::placeholder {
    color: #aaa;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 6vw;
    gap: 3vw;
}

.modal-actions button {
    flex: 1;
    padding: 3.5vw;
    border: none;
    border-radius: 2.5vw;
    font-size: 4vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cancel-btn {
    background-color: #f1f1f1;
    color: #555;
    border: 1px solid #ddd;
}

.cancel-btn:hover {
    background-color: #e0e0e0;
}

.save-btn {
    background-color: #4CAF50;
    color: white;
}

.save-btn:hover {
    background-color: #45a049;
}

/* 悬浮医生按钮样式 */
.floating-doctor {
    position: fixed;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: white;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.2);
    cursor: move;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 99;
    user-select: none;
    touch-action: none;
}

.floating-doctor:active {
    transform: scale(1.1);
    box-shadow: 0 3vw 5vw rgba(0, 0, 0, 0.3);
}

.doctor-icon {
    font-size: 6vw;
    margin-bottom: 1vw;
}

.doctor-text {
    font-size: 2.5vw;
    font-weight: 500;
}

@media screen and (max-width: 320px) {
    .floating-doctor {
        width: 13vw;
        height: 13vw;
    }
    
    .doctor-icon {
        font-size: 5vw;
    }
    
    .doctor-text {
        font-size: 2.2vw;
    }
}
</style>